// 发货单详情组件,注意要用反引号
Vue.component('invoice-detail-dialog', {
    template: `
<div>
    <el-dialog title="发货单详情信息"  width="70%" :visible.sync="invoiceDialog.show" center :close-on-click-modal="0"
        @close="cancel" v-loading="invoiceDialog.loading" custom-class="invoice-detail-dialog">
         <el-descriptions class="margin-top" :column="6" size="mini" border v-loading="invoiceDialog.loading">
                <template slot="title">
                        {{invoiceDetail.code}}
                        <template v-if="invoiceDetail.process == 6">
                            <el-tag type="danger" size="mini">已{{invoiceDetail.processTxt}}</el-tag>
                        </template>
                </template>
                <el-descriptions-item span="2">
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        任务单号
                    </template>
                    {{invoiceDetail.indentCode}}
                </el-descriptions-item>
                <el-descriptions-item span="2">
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        合同名称
                    </template>
                    {{invoiceDetail.conName}}
                </el-descriptions-item>
                <el-descriptions-item span="2">
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        客户名称
                    </template>
                    {{invoiceDetail.clientName}}
                </el-descriptions-item>
                <el-descriptions-item span="2">
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        施工单位
                    </template>
                    {{invoiceDetail.builder}}
                </el-descriptions-item>
                <el-descriptions-item span="4">
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        施工部位
                    </template>
                    {{invoiceDetail.site}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        销售人员
                    </template>
                    {{invoiceDetail.sales}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        工地联系人
                    </template>
                    {{invoiceDetail.linkMan}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        工地联系方式
                    </template>
                    {{invoiceDetail.linkPhone}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        前场工长
                    </template>
                    {{invoiceDetail.foreman}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        运距
                    </template>
                    {{invoiceDetail.distance}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="invoice-keynote" content-class-name="invoice-keynote">
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        强度等级
                    </template>
                    {{invoiceDetail.strengthName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        特性要求
                    </template>
                    {{invoiceDetail.tech}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        塌落度
                    </template>
                    {{invoiceDetail.slumps}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        浇筑方式
                    </template>
                    {{invoiceDetail.castModelName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        泵送设备
                    </template>
                    {{invoiceDetail.pumpDeviceName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        生产方式
                    </template>
                    {{invoiceDetail.createTypeTxt}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        发货类型
                    </template>
                    {{invoiceDetail.invoiceTypeTxt}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="invoice-keynote" content-class-name="invoice-keynote">
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        生产线
                    </template>
                    {{invoiceDetail.mixName}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="invoice-keynote" content-class-name="invoice-keynote">
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        生产时间
                    </template>
                    {{invoiceDetail.proTime}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="invoice-keynote" content-class-name="invoice-keynote">
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        生产方量
                    </template>
                    {{invoiceDetail.proStere}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="invoice-keynote" content-class-name="invoice-keynote">
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        发货方量
                    </template>
                    {{invoiceDetail.sendStere}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="invoice-keynote" content-class-name="invoice-keynote">
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        签收方量
                    </template>
                    {{invoiceDetail.signStere}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        工地退回方量
                    </template>
                    {{invoiceDetail.buildReStere}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        过磅退回方量
                    </template>
                    {{invoiceDetail.weightReStere}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        转入方量
                    </template>
                    {{invoiceDetail.inStere}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        转出方量
                    </template>
                    {{invoiceDetail.outStere}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        报废方量
                    </template>
                    {{invoiceDetail.scrapStere}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        是否累计
                    </template>
                    {{invoiceDetail.isAddTxt}}
                </el-descriptions-item>
                <el-descriptions-item></el-descriptions-item>
                <el-descriptions-item label-class-name="invoice-keynote" content-class-name="invoice-keynote">
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        累计车次
                    </template>
                    <template v-if="invoiceDetail.process != 6">
                        {{invoiceDetail.totalCar}}
                    </template>
                    <template v-else>
                        <el-tag type="danger" size="mini">已{{invoiceDetail.processTxt}}</el-tag>
                    </template>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="invoice-keynote" content-class-name="invoice-keynote">
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        累计方量
                    </template>
                    <template v-if="invoiceDetail.process != 6">
                        {{invoiceDetail.totalStere}}
                    </template>
                    <template v-else>
                        <el-tag type="danger" size="mini">已{{invoiceDetail.processTxt}}</el-tag>
                    </template>
                </el-descriptions-item>
                <!--<el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        是否过磅称重
                    </template>
                    {{invoiceDetail.isWeightTxt}}
                </el-descriptions-item>-->
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        调度员
                    </template>
                    {{invoiceDetail.dispatcherName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        拌台操作员
                    </template>
                    {{invoiceDetail.mixUserName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        车号
                    </template>
                    {{invoiceDetail.carCode}},{{invoiceDetail.carNo}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        司机
                    </template>
                    {{invoiceDetail.driver}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        票据类型
                    </template>
                    {{invoiceDetail.receiptTypeTxt}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        特殊结算类型
                    </template>
                    {{invoiceDetail.specialClearTypeTxt}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        道路类型
                    </template>
                    {{invoiceDetail.roadTypeTxt}}
                </el-descriptions-item>
                <el-descriptions-item :span="6">
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        备注
                    </template>
                    {{invoiceDetail.remark}}
                </el-descriptions-item>
                <el-descriptions-item :span="6">
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        运输备注
                    </template>
                    {{invoiceDetail.tranRemark}}
                </el-descriptions-item>
                <el-descriptions-item :span="6">
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        泵送备注
                    </template>
                    {{invoiceDetail.pumpRemark}}
                </el-descriptions-item>
            </el-descriptions>
            <el-collapse v-model="activeNames">
                <el-collapse-item title="派单记录" name="1">
                    <el-table :data="dispatchList" style="width: 100%" border size="mini" empty-text="该发货单无派单记录">
                        <el-table-column label="派单编号" prop="code" width="210"></el-table-column>
                        <el-table-column label="派单类型" prop="uploadTypeTxt" width="100"></el-table-column>
                        <el-table-column label="派单方量" prop="uploadStere" width="80"></el-table-column>
                        <el-table-column label="生产方量" prop="proStere" width="80"></el-table-column>
                        <el-table-column label="派单时间" prop="uploadTime" width="180"></el-table-column>
                        <el-table-column label="生产时间" prop="proTime" width="180"></el-table-column>
                        <!--<el-table-column label="生产线"  width="80"></el-table-column>-->
                        <el-table-column label="是否作废" width="150">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.status == 1" type="danger">作废</el-tag>
                                <el-tag v-else >正常</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作人员" prop="creator" width="100"></el-table-column>
                        <el-table-column label="备注" prop="remark"></el-table-column>
                    </el-table>
                </el-collapse-item>
                <el-collapse-item title="退剩转操作记录" name="2">
                        <el-table :data="handleList" style="width: 100%" border size="mini" empty-text="该发货单无退剩转操作记录">
                            <el-table-column label="转入/转出" width="80">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.inOutTxt == '流入'" type="danger">转入</el-tag>
                                    <el-tag v-if="scope.row.inOutTxt == '流出'" type="danger">转出</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作类型" width="80">
                                <template slot-scope="scope">
                                    <el-tag size="mini" :type="scope.row.typeClass">{{scope.row.operateTypeTxt}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="分料类型" prop="tranTypeTxt" width="80"></el-table-column>
                            <el-table-column label="退料类型" prop="reTypeTxt" width="80"></el-table-column>
                            <el-table-column label="操作方量" prop="operateStere" width="90"></el-table-column>
                            <el-table-column label="操作人员" prop="creator" width="100"></el-table-column>
                            <el-table-column label="操作时间" prop="createTime" width="180"></el-table-column>
                            <el-table-column label="关联发货单"  width="210">
                                <template slot-scope="scope">
                                    <template  v-if="scope.row.inOutTxt == '流入'">
                                        <el-link type="primary" @click="showHandInvDetail(scope.row.sourceInvoiceId)">{{scope.row.sourceInvoiceCode}}</el-link>
                                    </template>
                                    <template  v-if="scope.row.inOutTxt == '流出'">
                                        <el-link type="primary" @click="showHandInvDetail(scope.row.targetInvoiceId)">{{scope.row.targetInvoiceCode}}</el-link>
                                    </template>
                                </template>
                             </el-table-column>
                             <el-table-column label="备注" prop="remark" show-overflow-tooltip></el-table-column>
                             <el-table-column label="操作" width="80">
                                <template slot-scope="scope">
                                        <el-popconfirm title="确定作废该操作吗？" @confirm="scrapHandle(scope.row.id)">
                                            <el-button icon="el-icon-delete" size="mini" type="danger" slot="reference" circle></el-button>
                                        </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                </el-collapse-item>
                <el-collapse-item title="工控机手动生产记录" name="3">
                    <el-descriptions v-if="controlDetail != null" border size="mini" :column="6">
                        <el-descriptions-item label="工控单号" span="2">{{controlDetail.controlInvoiceNo}}</el-descriptions-item>
                        <el-descriptions-item label="合同名称" span="2">{{controlDetail.conName}}</el-descriptions-item>
                        <el-descriptions-item label="施工部位" span="2">{{controlDetail.site}}</el-descriptions-item>
                        <el-descriptions-item label="生产线">{{controlDetail.lineName}}</el-descriptions-item>
                        <el-descriptions-item label="强度等级">{{controlDetail.strengthName}}</el-descriptions-item>
                        <el-descriptions-item label="浇筑方式">{{controlDetail.castModel}}</el-descriptions-item>
                        <el-descriptions-item label="生产方量">{{controlDetail.concreteStere}}</el-descriptions-item>
                        <el-descriptions-item label="生产时间">{{controlDetail.proTime}}</el-descriptions-item>
                        <el-descriptions-item label="运输车辆">{{controlDetail.carCode}}</el-descriptions-item>
                    </el-descriptions>
                    <el-divider v-else content-position="center">该发货单无工控机关联记录</el-divider>
                </el-collapse-item>
            </el-collapse>
        </el-dialog>
        <!--  发货单详情  -->
        <invoice-detail-dialog v-if="detailDialog.show" :invoice-id="detailDialog.invoiceId"
                           @closed="detailDialog.show = false"></invoice-detail-dialog>                   
        </div>
      `,
    props: {
        invoiceId: null,
    },
    data() {
        return {
            invoiceDetail: {},
            invoiceDialog: {
                show: true,
                loading: false,
            },
            activeNames: [],
            //  派单记录
            dispatchList: [],
            //  操作记录
            handleList: [],
            //  详情数据
            detailDialog: {
                show: false,
                invoiceId: false,
            },
            //  工控机自主关联的数据
            controlDetail: null,
        }
    },
    created() {
        let that = this;
        that.loadInvDetail();
        that.loadDisRecords();
        that.loadHandleRecords();
        that.loadControlDetail();
    },
    methods: {
        //  加载发货单详情记录
        loadInvDetail() {
            let that = this;
            that.invoiceDialog.loading = true;
            $.ajax({
                type: "POST",
                url: "/pro/invoice/detail/" + that.invoiceId,
                async: true,
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        // console.log(res.data);
                        that.invoiceDetail = res.data;
                    } else {
                        that.$message({
                            showClose: true,
                            message: "查询发货单详情失败:" + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                    that.invoiceDialog.loading = false;
                }
            });
        },
        //  加载派单记录
        loadDisRecords() {
            let that = this;
            let invId = that.invoiceId;
            if (isNull(invId)) {
                that.$message({
                    showClose: true,
                    message: '请选择正确的发货单',
                    type: 'error'
                });
                return;
            }
            $.ajax({
                type: "post",
                url: "/pro/invoice/dispatch/list/" + invId,
                async: true,
                dataType: 'json',
                data: {},
                success: function (res) {
                    if (res.code == 0) {
                        that.dispatchList = res.data;
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询发货单派单数据失败：' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                }
            })
        },
        //  加载操作记录
        loadHandleRecords() {
            let that = this;
            let invId = that.invoiceId;
            if (isNull(invId)) {
                that.$message({
                    showClose: true,
                    message: '请选择正确的发货单',
                    type: 'error'
                });
                return;
            }
            $.ajax({
                type: "post",
                url: "/pro/invoice/handle/list/" + invId,
                async: true,
                dataType: 'json',
                data: {},
                success: function (res) {
                    if (res.code == 0) {
                        let handleRecords = res.data;
                        that.handleList = handleRecords;
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询发货单操作记录失败：' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                }
            })
        },
        /**
         * 查询工控机数据
         */
        loadControlDetail() {
            let that = this;
            let invId = that.invoiceId;
            if (isNull(invId)) {
                that.$message({
                    showClose: true,
                    message: '请选择正确的发货单',
                    type: 'error'
                });
                return;
            }
            $.ajax({
                type: "post",
                url: "/control/invoice/queryByErp/" + invId,
                async: true,
                dataType: 'json',
                data: {},
                success: function (res) {
                    if (res.code == 0) {
                        let controlDetail = res.data;
                        that.controlDetail = controlDetail;
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                }
            })
        },
        /**
         * 显示发货单详情
         * @param invoiceId
         */
        showHandInvDetail(invoiceId) {
            let that = this;
            that.detailDialog.show = true;
            that.detailDialog.invoiceId = invoiceId;
        },
        scrapHandle(handelId) {
            let that = this;
            this.$prompt('', '请输入作废原因', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                center: true
            }).then(({value}) => {
                that.tableLoading = true;
                $.ajax({
                    type: "DELETE",
                    url: "/pro/invoice/handle/scrap/" + handelId,
                    async: true,
                    dataType: 'json',
                    data: {
                        remark: value,
                    },
                    success: function (res) {
                        if (res.code == 0) {
                            that.$message({
                                showClose: true,
                                message: '作废成功',
                                type: 'success'
                            });
                            that.loadHandleRecords();
                        } else {
                            that.$message({
                                showClose: true,
                                message: '作废失败：' + res.msg,
                                type: 'error'
                            });
                        }
                    },
                    error: function (res) {
                        that.$message({
                            showClose: true,
                            message: '请求失败，请联系管理员',
                            type: 'error'
                        });
                        return;
                    },
                    complete: function (XMLHttpRequest, status) {
                        that.tableLoading = false;
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消作废操作'
                });
            });
        },
        //  取消
        cancel() {
            let that = this;
            //  调用父级的关闭弹窗
            this.$emit("closed")
        },
    }
});

// 创建 Vue 实例
new Vue({
    el: '#app',
    data() {
        return {};
    }
});
